<template>
	<view>
		<view style="display: flex;margin: 15px 5px;">
			<view style="display: flex;flex: 1;">
				<view style="background-color:#ffaa00; padding: 0px 5px;margin: 5px 5px;">班级</view>
				<text style="font-weight: bolder;font-size: 18px;">{{title}}</text>
			</view>
			<view><u-tag text="编辑" icon="edit-pen" plain size="mini" type="primary"></u-tag></view>
		</view>
		<view style="margin: 10px;color:#999">
			<view style="display: flex;">
				<view style="flex: 1;">班级学员数: {{stucount}}人</view>
				<view style="flex: 1;">班级最大学员数量: {{stucount}}人</view>
			</view>
			<view style="display: flex;padding: 5px 0px;">
				<view style="flex: 1;">关联课程: {{course}}</view>
				<view style="flex: 1;">班级老师: {{teacher}}</view>
			</view>
		</view>

		<!--内容-->
		<view>
			<u-tabs :list="tabList" lineWidth="100"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 36px;background:#f5f5f5" :scrollable="false"
				style="box-sizing: border-box;" @click="handleTabChange"></u-tabs>
		</view>
		<view >
			<view v-if="currentTabIndex==0">
				<u-gap height="5" bgColor="#ffffff"></u-gap>
				 <u-list>
				 	<u-list-item v-for="(item, index) in students" :key="index">
				 		<u-cell :title="item.username+'(ID:'+item.stuid+')'" isLink > 
							<view slot="icon" @click="handleViewStudent" >
								<u-avatar slot="icon" shape="circle" size="35" :src="item.avatar"></u-avatar>
							</view>
							<view slot="title" @click="handleViewStudent" style="background-color: #f1f1f1; height:40px;padding: 5px;">
								<view>{{item.username}}({{item.stuid}})</view>
								<view style="line-height: 25px;">dd</view>
							</view>
							<view slot="value" style="display: flex;flex-direction: column;">
								<view @click="handleQuitClass" style="padding: 5px;cursor: pointer;">
									<u-button size="mini"  text="退班" type="error" icon="edit-pen"  ></u-button>
								</view>							
							</view>
						</u-cell>
						
					</u-list-item>
				</u-list>
			</view>
			<view v-if="currentTabIndex==1" style="padding-bottom: 50px;">
				<view>
					<view>姓名</view>
					<view>到课情况</view>
				</view>
				<!--学员名单-->
				<u-list>
				 	<u-list-item v-for="(item, index) in students" :key="index">
				 		<u-cell :title="item.username+'(ID:'+item.stuid+')'"> 
							<view slot="icon" >
								<u-avatar slot="icon" shape="circle" size="30" :src="item.avatar"></u-avatar>
							</view>
							<view slot="title" style="background-color: #f1f1f1; height:40px;padding: 5px;">
								<view>{{item.username}}({{item.stuid}})</view>
							</view>
							<view slot="value" style="display: flex;flex-direction: column; width: 120px;">
								<u-radio-group v-model="item.status">
										<u-radio customStyle="margin-right:16px" label="到课" name="1"></u-radio>
										<u-radio customStyle="margin-right:16px" label="请假" name="0"></u-radio>
								</u-radio-group>						
							</view>
						</u-cell>
						
					</u-list-item>
				</u-list>
				
				
				<view style="position: fixed; background-color: #ffffff;height:50px; bottom: 0px; width: 100%;">
					<u-button type="primary">点名</u-button>
				</view>
				
			</view>
			<view v-if="currentTabIndex==2">2</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabIndex: 1,
				classid: "0001",
				title: "小苗班",
				course: "拉丁舞初级",
				stucount: 2,
				teacher: "张三",
				tabList: [{
						name: '学员',
					},
					{
						name: '点名'
					}, {
						name: '排课',
					}
				],
				students:[
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/4.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/1.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/2.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/2.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/3.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/4.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/5.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/1.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/4.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/3.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/2.jpg',status:1},
					{stuid:'0001',username:"张三",sex:"男",avatar:'https://cdn.uviewui.com/uview/album/3.jpg',status:1}
				]
			}
		},
		onLoad(params) {
			this.classid = params.classid;
		},
		
		methods: {
			handleTabChange(item) {
				console.log(item);
				this.currentTabIndex = item.index
			},
			handleViewStudent(){
				uni.navigateTo({
					url:"/pages/student/detail"
				})
			},
			handleQuitClass(){
				console.log("退班");
				uni.$u.toast("退班");
			}
		
		}
	}
</script>

<style>

</style>